<!DOCTYPE html>
<html>
  <head>
  
    <title>Panoramio Layer</title>
    
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    
    <link href="default.css"
          rel="stylesheet" 
          type="text/css">
          
    <style type="text/css">
      
	  #filter {
        padding: 5px 10px;
        background: #fff;
        border: 1px solid #ccc;
        border-top: 0;
      }
	  
    </style>
    
    <!-- Panoramio Import -->
    <script type="text/javascript"
      		src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=panoramio">
    </script>

    <script type="text/javascript">
      
	  // Karte initialisieren
	  function initialize() {
       
	    // Kartenoptionen
	    var myOptions = {
          zoom: 15,
          center: new google.maps.LatLng(40.693134, -74.031028),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

		// Karte
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

		// PanoramioLayer initialisieren
        var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
		
		// PanoramioLayer setzen
        panoramioLayer.setMap(map);
		
		// Bildtag
        var tag = document.getElementById('tag');
		
		// Button zum Filtern
        var button = document.getElementById('filter-button');

		// Verschiedene Bildtags beim Klick laden
        google.maps.event.addDomListener(button, 'click', function() {
          panoramioLayer.setTag(tag.value);
        });

		// Kontrollelemente mittig oben platzieren
        map.controls[google.maps.ControlPosition.TOP].push(
            document.getElementById('filter'));
      }


    </script>
  </head>
  
  <body onLoad="initialize();">
  
    <!-- Filter -->
    <div id="filter">
      <input id="tag" value="Ship">
      <button id="filter-button">Filter on Tag</button>
    </div>
    
    <!-- Kartendarstellung -->
    <div id="map_canvas">
    
    </div>

  </body>
</html>
